<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

<head th:replace="fragments/header :: common_header(~{::title}, ~{::link}, ~{::script})">
    <title>主页</title>
    <link id="indexCss" rel="stylesheet" href="../static/app/css/index.css" th:href="@{/app/css/index.css}">
    <!-- My JavaScript -->
    <script>
        if (top !== self) top.location = self.location;
    </script>
    <script src="../static/app/js/index.js" th:src="@{/app/js/index.js}"></script>
</head>

<body class="easyui-layout">
<script>
    if (window.top !== window.self) {
        window.top.location = window.location;
    }
</script>
<noscript>
    <div style="position: absolute; z-index: 100000; height: 2046px; top: 0; left: 0; width: 100%; background: white; text-align: center;">
        <img src="../static/app/images/noscript.gif" th:src="@{/app/images/noscript.gif}" alt="抱歉，请开启脚本支持!"/>
    </div>
</noscript>

<!-- begin of header -->
<div data-options="region:'north',border:false" class="super-north" style="height: 50px;">
    <!--顶部-->
    <div class="super-navigation">
        <div class="super-navigation-title">&nbsp;&nbsp;BOOT-MATILDA</div>
        <div class="super-navigation-main">
            <div class="super-setting-left">
                <ul>
                    <li><i class="fa fa-commenting-o"></i></li>
                    <li><i class="fa fa-envelope-o"></i></li>
                    <li><i class="fa fa-bell-o"></i></li>
                </ul>
            </div>
            <div class="super-setting-right">
                <ul>
                    <li class="user">
                        <span class="user-icon"><img src="../static/app/images/t-002.jpg" th:src=" @{/app/images/t-002.jpg}"/></span>
                        <!--<span th:text="${username}">管理员</span>-->
                        <span sec:authentication="name">管理员</span>
                        <!--<span sec:authentication="principal.authorities">权限</span>-->
                    </li>
                    <li>
                        <div class="super-setting-icon">
                            <i class="fa fa-gears"></i>
                        </div>
                        <div id="setting-mm" class="easyui-menu">
                            <div onclick="seeUserInfo();"><i class="fa fa-user"></i> 用户信息</div>
                            <div id="editpass"><i class="fa fa-key"></i> 修改密码</div>
                            <div id="themeSetting"><i class="fa fa-dashboard"></i> 变更主题</div>
                            <div class="menu-sep"></div>
                            <div id="logout"><i class="fa fa-sign-out"></i> 退出</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- end of header -->

<!-- begin of sidebar -->
<div data-options="region:'west',title:'',hideCollapsedContent:false" style="width: 200px;">
    <div id="menu">
        <!--  导航内容 -->
    </div>
</div>
<!-- end of sidebar -->

<!-- begin of main -->
<div data-options="region:'center',border:false" style="padding-top: 2px;">
    <div id="mainTabs" class="easyui-tabs" data-options="border:false,fit:true">
        <div data-options="title:'欢迎使用',content:createIFrame('/welcome'),closable:false,border:false,iconCls:'e-icon fa fa-home fa-lg'"></div>
    </div>
</div>
<!-- end of main -->

<!-- begin of footer -->
<div data-options="region:'south'" class="super-south">
    <!--页脚-->
    <div class="super-footer-info">
        <span><i class="fa fa-info-circle"></i> 作者：Guo.wl&nbsp;&nbsp;QQ：1060702785</span>
        <span> &copy; CopyRight 2020 版权所有 <i class="fa fa-caret-right"></i></span>
    </div>
</div>
<!-- end of footer -->

<!-- 变更主题弹窗 -->
<!--主题设置弹窗-->
<div id="win" style="width: 460px;height: 260px;">
    <div class="themeItem">
        <ul>
            <li>
                <div class="superGreen" style="background: #1abc9c;">green</div>
            </li>
            <li class="themeActive">
                <div class="superBlue" style="background: #3498db;">blue</div>
            </li>
            <li>
                <div class="superGray" style="background: #95a5a6;">gray</div>
            </li>
            <li>
                <div class="superAmethyst" style="background: #9b59b6;">amethyst</div>
            </li>
            <li>
                <div class="superBlack" style="background: #34495e;">black</div>
            </li>
            <li>
                <div class="superYellow" style="background: #e67e22;">yellow</div>
            </li>
            <li>
                <div class="superEmerald" style="background: #2ecc71;">emerald</div>
            </li>
            <li>
                <div class="superRed" style="background: #e74c3c;">red</div>
            </li>
        </ul>
    </div>
</div>

<div th:replace="~{fragments/footer :: footer}">...</div>
<!-- My JavaScript -->

</body>
</html>

<div id="mm" class="easyui-menu" style="width: 180px;">
    <div id="mm-tabupdate" data-options="iconCls:'fa fa-refresh e-icon'">刷新</div>
    <div class="menu-sep"></div>
    <div id="mm-tabclose">关闭</div>
    <div id="mm-tabcloseall">全部关闭</div>
    <div id="mm-tabcloseother">除此之外全部关闭</div>
    <div class="menu-sep"></div>
    <div id="mm-tabcloseright">当前页右侧全部关闭</div>
    <div id="mm-tabcloseleft">当前页左侧全部关闭</div>
    <div class="menu-sep"></div>
    <div id="mm-exit">退出</div>
</div>

<!-- 修改密码弹窗 -->
<div id="pwd-dlg" class="easyui-dialog" data-options="title:'密码修改',modal:true,closed:true,buttons:'#pwd-dlg-buttons'"
     style="width: 380px; height: 275px; padding: 10px;">
    <form id="pwd-fm" method="POST">
        <table class="dlgtable" width="350px">
            <tr>
                <td>原密码：</td>
                <td><input name="password" class="easyui-passwordbox" prompt="原密码" data-options="required:true"
                           style="width: 170px;"/></td>
            </tr>
            <tr>
                <td>新密码：</td>
                <td><input id="pwd" name="newPassword" class="easyui-passwordbox" prompt="新密码"
                           data-options="required:true"
                           style="width: 170px;"/></td>
            </tr>
            <tr>
                <td>密码确认：</td>
                <td><input name="rePassword" class="easyui-passwordbox"
                           data-options="required:true,validType:'same[\'pwd\']'" prompt="密码确认" style="width: 170px;"/>
                </td>
            </tr>
        </table>
    </form>
</div>
<div id="pwd-dlg-buttons">
    <a href="javascript:;" class="easyui-linkbutton" iconCls="fa fa-save e-icon" onclick="updatePassword();">保存</a>
</div>

<!-- 用户信息查看 -->
<div id="user-info-dlg" class="easyui-dialog" data-options="title:'用户信息查看',width:650,height:320,closed:true">
    <form class="dlg-form" method="POST">
        <fieldset>
            <legend>用户信息查看</legend>
            <div class="form-row">
                <div class="form-item">
                    <label class="label-top">用户名：</label>
                    <input name="username" class="easyui-validatebox easyui-textbox" prompt="请输入用户名"
                           data-options="readonly:true">
                </div>
                <div class="form-item">
                    <label class="label-top">昵称：</label>
                    <input name="nickName" class="easyui-validatebox easyui-textbox"
                           data-options="readonly:true">
                </div>
            </div>
            <div class="form-row">
                <div class="form-item">
                    <label class="label-top">邮箱：</label>
                    <input name="email" class="easyui-validatebox easyui-textbox"
                           data-options="readonly:true">
                </div>
            </div>
            <div class="form-row">
                <div class="form-item" style="width:100%;">
                    <label class="label-top">备注：</label>
                    <input name="note" class="easyui-validatebox easyui-textbox"
                           data-options="readonly:true,height:60,multiline:true" style="width: 460px;"/>
                </div>
            </div>
        </fieldset>
    </form>
</div>